import {Select} from 'antd'
import React, {Component, CSSProperties} from 'react'

interface IFilter {
  action?: Function;
  course?: any;
  getValue?: (value: any) => any;
  style?: CSSProperties;
  courseName?: string;
}

export default class FilterByCourse extends Component<IFilter, any> {
  constructor(props: IFilter) {
    super(props);
    this.state = {
      courseName: null
    }
  }

  componentDidMount() {
    if (this.props.courseName) {
      this.setState({courseName: this.props.courseName});
    }
  }

  componentWillReceiveProps(nextProps: Readonly<IFilter>, nextContext: any) {
    if (nextProps.courseName) {
      console.log(nextProps.courseName);
      this.setState({courseName: this.props.courseName});
    }
  }

  onSelectChange(e: any, info: any) {
    const id = parseInt(info.key);
    this.setState({courseName: e});
    this.props.getValue?.(id);
  }

  render() {
    const {course} = this.props;
    return (
      <div style={this.props.style ? this.props.style : {margin: 10, marginLeft: 22}}>
        <Select placeholder={"请选择课程"} value={this.state.courseName} style={{width: 300}} showSearch
                onChange={this.onSelectChange.bind(this)}>
          {
            course.map((element: any, index: number) => {
              return <Select.Option key={element.id} value={element.courseName}>
                {element.courseName}
              </Select.Option>
            })
          }
        </Select>
      </div>
    )
  }
}
